<template>
    <div>
        <el-button style="float:right" type="success" @click="svaedefense" round>添加</el-button>
        {{params.titleName}}
        <el-select
            v-model="params.titleName"
            filterable
            remote
            allow-create
            reserve-keyword
              default-first-option
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="findPage"
            >
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
           
            >
            </el-option>
        </el-select>
        <el-cascader
        @change="editCasc"
                    clearable
                    placeholder="请选择类型"
                    :props="{ value: 'id',label:'typeName' }"
                    style="width: 13%"
                    v-model="subjectType"
                    :options="positionOptions"
                    :show-all-levels="false"
                  ></el-cascader>
        <el-badge :value="defenseList.length" class="item">
            <el-button size="small" @click="opendefense">答辩室</el-button>
        </el-badge>
        <el-button @click="clear">显示全部</el-button>
        <div style="float:left;position: relative;left:5px;top:200px;width:80px;height:200px;">
            <div v-for="(item,index) in diffentList" :key="index">
                <el-button style="margin-top:12px;" type="warning" @click="findBydifficulty(item.id)">{{item.difficultyName}}</el-button>
            </div>
        </div>
        <!-- <div style="float:left;position: relative;left:5px;top:170px;width:80px;height:200px" v-if="openType==2">
            <div v-for="(item,index) in typeList" :key="index">
                <el-button style="margin-top:30px" type="primary" @click="findByType(item.id)">{{item.typeName}}</el-button>
            </div>
        </div>
        <div style="float:left;position: relative;left:5px;top:260px;width:30px;height:200px" v-if="openboult==2">
            <div @click="openType=2,openboult=1" style="width:16px;height:30px;background:#ccc">
                <i class="el-icon-arrow-right el-icon--right" style="padding-top:8px">
                </i>
            </div>
        </div> -->
        <el-table
        :data="topicList"
        style="width: 85%;margin-left:20px"
        @selection-change="handleSelectionChange"
        ref="indexTable"
        v-if="openList==2">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="subjectType"
            label="题目类型"
            width="120">
            <template slot-scope="scope">
               {{editData(scope.row,0)}}
            </template>
        </el-table-column>
        <el-table-column
            prop="subjectDifficlty"
            label="题目难度"
            width="120">
            <template slot-scope="scope">
               {{editData(scope.row,1)}}
            </template>
        </el-table-column>
        <el-table-column
            prop="titleName"
            label="标题"
            width="120">
            <template slot-scope="scope">
                <span v-html="scope.row.titleName"></span>
            </template>
        </el-table-column>
          <el-table-column
            prop="keyWordName"
            header-align="center"
            align="center"
            label="关键词">
            <template slot-scope="obj">
            <span v-html="obj.row.keyWordName"></span>
            </template>
        </el-table-column>
            <el-table-column
            prop="subiectDesc"
            header-align="center"
            align="center"
            label="题目描述">
            <template slot-scope="obj">
            <span v-html="obj.row.subiectDesc"></span>
            </template>
        </el-table-column>
        <el-table-column
            prop="standardAnswer"
            label="标准答案"
            width="120">
        </el-table-column>
        <el-table-column
            prop="timeLimit"
            label="时间限制"
            width="120">
        </el-table-column>
        <el-table-column
            prop="beginData"
            label="开始时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="endData"
            label="结束时间"
            width="120">
        </el-table-column>
        </el-table>
        <el-pagination
            style="margin-right:150px"
            v-if="openList==2"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.curPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="答辩室名称">
            <el-input v-model="reply.replyName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否开启">
            <el-switch
                v-model="reply.isStart"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveReply">确定</el-button>
            <el-button type="primary" @click="dialogVisible=false,defense={}">取消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
    title="提示"
    :visible.sync="dialogVisible1"
    width="70%">
    <span>答辩室已选择题目</span>
    <el-table
        :data="defenseList"
        style="padding-left:50px"
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="subjectType"
            label="题目类型"
            width="120">
            <template slot-scope="scope">
               {{editData(scope.row,0)}}
            </template>
        </el-table-column>
        <el-table-column
            prop="subjectDifficlty"
            label="题目难度"
            width="120">
            <template slot-scope="scope">
               {{editData(scope.row,1)}}
            </template>
        </el-table-column>
        <el-table-column
            prop="titleName"
            label="标题"
            width="120">
            <template slot-scope="scope">
                <span v-html="scope.row.titleName"></span>
            </template>
        </el-table-column>
          <el-table-column
            prop="keyWordName"
            header-align="center"
            align="center"
            label="关键词">
            <template slot-scope="obj">
            <span v-html="obj.row.keyWordName"></span>
            </template>
        </el-table-column>
            <el-table-column
            prop="subiectDesc"
            header-align="center"
            align="center"
            label="题目描述">
            <template slot-scope="obj">
            <span v-html="obj.row.subiectDesc"></span>
            </template>
        </el-table-column>
        <el-table-column
            prop="standardAnswer"
            label="标准答案"
            width="120">
        </el-table-column>
        <el-table-column
            prop="timeLimit"
            label="时间限制"
            width="120">
        </el-table-column>
        <el-table-column
            prop="beginData"
            label="开始时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="endData"
            label="结束时间"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作"
            width="110">
            <template slot-scope="scope">
                <el-button type="small" @click="delfensece(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="createdefense">确 定</el-button>
    </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'defense',
    data(){
        return{
            params:{
                curPage:1,
                limit:10,
                subjectType:null,
                subjectDifficlty:null,
                titleName:null
            },
            positionOptionsOne:[],
            positionOptions:[],
            dialogVisible:false,
            dialogVisible1:false,
            topicList:[],
            total:0,
            defense:{},
            diffentList:[],
            typeList:[],
            subjectIds:[],
            ids:[],
            reply:{
                id:null
            },
            openType:1,
            openboult:2,
            openList:1,
            options: [],
            value: [],
            list: [],
            loading: false,
            states:[],
            defenseList:[],
            subjectType:[]
        }
    },
    methods:{
        clear(){
            this.defenseList = []
            this.params = {curPage:1,
                limit:10,
                subjectType:null,
                subjectDifficlty:null,
                titleName:null}
            this.findPage()
            this.openList=2
        },
        editCasc(){
            for(let i=0;i<this.positionOptionsOne.length;i++){
                if(this.subjectType[this.subjectType.length-1]===this.positionOptionsOne[i].id){
                    this.params.subjectType = this.subjectType[this.subjectType.length-1]
                }
            }
            this.findPage()
            this.openList=2
        },
        delfensece(row){
            this.defenseList.forEach((item,index)=>{
                if(item==row){
                    this.defenseList.splice(index,1)
                }
            })
            this.findPage()
        },
        opendefense(){
            this.dialogVisible1 = true
        },
        async svaedefense(){
            await this.subjectIds.forEach(item=>{
                this.defenseList.push(item)
            })
            this.findPage()
        },
        bindRowKeys(row){
            return row.id;
        },
         editData(value,status){
            if(status==1){
                return JSON.parse(value.subjectDifficlty).difficultyName
            }
             if(status==0){
                return JSON.parse(value.subjectType).typeName
            }
        },
        async findByType(id){
                this.params.subjectType = id
            this.openList = 2;
            this.findPage();
        },
        findBydifficulty(id){
            this.params.subjectDifficlty = id
            this.openList = 2;
            this.findPage();
        },
        async findPage(){
            this.openList = 2;
            this.$http({
              url: this.$http.adornUrl(`/reply/each/findEs/${this.params.curPage}/${this.params.limit}`),
              method: 'post',
              data: this.$http.adornData({
                'typeId': this.params.subjectType,
                'titleName': this.params.titleName,
                'difficltyId': this.params.subjectDifficlty,
                'defenseList': this.defenseList
              })
            }).then(({data}) => {
              this.topicList = data.list;
              this.total = data.total;
            })
        },
        onSubmit(){
            this.findPage();
        },
        handleSizeChange(val){
            this.params.limit = val;
            this.findPage();
        },
        handleCurrentChange(val){
            this.params.curPage = val;
            this.findPage();
        },
        editDataSearm(val){//处理流数据
            for (let i=0;i<val.length;i++){
                if (val[i].children.length === 0){
                val[i].children = undefined
                }else{
                this.editDataSearm(val[i].children)
                }
            }
            return val
        },
        createdefense(){
            this.dialogVisible = true;
        },
        findSubjectType(){
             this.$http({
              url: this.$http.adornUrl("/hope/reply/subjecttype/all/"),
              method: 'get',
              data: this.$http.adornData({
              })
            }).then(({data}) => {
              this.typeList = data;
            })
        },
        findDiffent(){
            this.$http({
              url: this.$http.adornUrl("/hope/reply/subjectdifficulty/all/"),
              method: 'get',
              data: this.$http.adornData({
              })
            }).then(({data}) => {
              this.diffentList  = data;
            })
        },
        handleSelectionChange(val) {
            this.subjectIds = val;
        },
        saveReply(){
            for(const sub of this.defenseList){
                this.ids.push(sub.id);
            }
            this.$http({
              url: this.$http.adornUrl("/reply/replygroup/save/"),
              method: 'post',
              data: this.$http.adornData({
                  'replyName':this.reply.replyName,
                  'isStart':this.reply.isStart
              })
            }).then(({data}) => {
                this.reply.id = data.id;
                this.$http({
              url: this.$http.adornUrl(`/reply/subjectreply/insert/${this.reply.id}/${this.ids}`),
              method: 'get',
              data: this.$http.adornData({
              })
            }).then(({data}) => {
            })
            })
            this.dialogVisible = false;
        },
        async findAll(){
            await this.$http({
              url: this.$http.adornUrl("/reply/each/findEs/1/10"),
              method: 'post',
              data: this.$http.adornData({
              })
            }).then(({data}) => {
                for(const state of data.list){
                     this.states.push(state.titleName)
                }
            })
            this.list = this.states.map(item => {
                return { value: `value:${item}`, label: `${item}` };
            });
        }, 
        remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },
      gbsj(){
          alert("1111111111111111111");
      }
    },
    async mounted(){
        await this.$http({
            url: this.$http.adornUrl('/hope/reply/subjecttype/alls'),
            method: 'get'
        }).then(({data}) => {
            this.positionOptions = this.editDataSearm(data)
        })
        await this.$http({
            url: this.$http.adornUrl('/hope/reply/subjecttype/all'),
            method: 'get'
        }).then(({data}) => {
            this.positionOptionsOne=data
        })
        this.findAll();
        this.findSubjectType();
        this.findDiffent();
    },
    watch:{
        // topicList(val){
        //     val.forEach(item=>{
        //         this.subjectIds.forEach(self=>{
        //             this.$refs.indexTable.toggleRowSelection(item)
        //         })
        //     })
            
        // }
    }
}
</script>

<style>

</style>
